<template>
  <div class="custom-titlebar">
    <div class="left">
      <img src="@/assets/logo.png" class="app-icon">
      <span class="app-name">嘉仪 HTTP Proxy Tool</span>
    </div>
    <div class="right">
      <div class="window-button minimize" @click="minimizeWindow">
        <svg width="11" height="1" viewBox="0 0 11 1">
          <path d="M0 0h11v1H0z" fill="currentColor"/>
        </svg>
      </div>
      <div class="window-button maximize" @click="maximizeWindow">
        <svg width="10" height="10" viewBox="0 0 10 10">
          <path d="M0 0v10h10V0H0zm9 9H1V1h8v8z" fill="currentColor"/>
        </svg>
      </div>
      <div class="window-button close" @click="closeWindow">
        <svg width="10" height="10" viewBox="0 0 10 10">
          <path d="M9.1 1.1L8.9.9 5 4.8 1.1.9l-.2.2L4.8 5 .9 8.9l.2.2L5 5.2l3.9 3.9.2-.2L5.2 5l3.9-3.9z" fill="currentColor"/>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
const { remote } = require('electron')

export default {
  name: 'App-Title',
  data() {
    return {
      name: '1'
    }
  },
  created() {
    let path = this.$route.path
    this.$router.push({ path })
  },
  methods: {
    minimizeWindow() {
      remote.getCurrentWindow().minimize()
    },
    maximizeWindow() {
      const win = remote.getCurrentWindow()
      if (win.isMaximized()) {
        win.unmaximize()
      } else {
        win.maximize()
      }
    },
    closeWindow() {
      remote.getCurrentWindow().close()
    },
    toPage(path) {
      this.$router.push({ path })
    }
  }
}
</script>

<style>
.custom-titlebar {
  height: 38px;
  background: linear-gradient(to right, #2c3e50, #3498db);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  -webkit-app-region: drag;
  user-select: none;
  position: relative;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.app-name {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.right {
  display: flex;
  -webkit-app-region: no-drag;
  height: 100%;
}

.window-button {
  width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.window-button:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.close:hover {
  background-color: #e81123;
}
</style>